<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入你想说的话" maxlength="100"></textarea>
      
        <mt-button type="primary" size="large">发表品论</mt-button>
        <!-- 添加品论内容 -->
        <div class="cmt-list">
            <div class="cmt-item"  v-for="(item, i) in comment" :key="item.add_time">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">{{item.content==='undefined'||item.content==='undefined'?"此用户很懒":item.content}}</div>
            </div>
        </div>
        <!-- 添加品论内容 -->


        <!-- plain是让按钮中间变白 size="large"让按钮最长显示  type="danger"背景是蓝色
        来源于mint-ui中的Button包 -->
        <mt-button type="danger" size="large" plain @click="getMore()">加载更多</mt-button>
   
    </div>
</template>

<script>
    import {Toast} from "mint-ui";

export default {
    // 获取评论的内容、
    data(){
        return{
            pageIndex : 1,
            comment: []
        };
    },
    created(){
        this.getComments();
    },
    methods :{
        // 获取评论
        getComments(){
             this.$http.get('api/getcomments/'+this.id +"?pageindex="+this.pageIndex)
             .then(res=>{
                 if(res.body.status===0){
                     Toast("请求成功")
                     this.comment = this.comment.concat(res.body.message);
                     console.log(this.comment)
                 }else {
                     Toast('请求失败');
                 }
             })
         },
        getMore(){
             this.pageIndex++;
             this.getComments();
        },
    },
  
    
    // 点击加载更多
  
    props:['id']
    
};
</script>

<style lang="scss" scoped>
    .cmt-container {
        margin: 10px 0; 
        h3{
            font-size: 20px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin:0 ;
        }
        .cmt-item {
            font-size: 13px;
            .cmt-title{
                line-height:30px;
                background-color: #ccc;

             }
             .cmt-body{
                //  首行缩进
                 line-height: 35px;
                 text-indent: 2em;
             }
        }
    }
</style>
